<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-mode 数据源绑定实例</h1>
<hr>
<div id="app">
    {{message}}
    <br>
    <h2>文本框</h2>
    原始：<input type="text" v-model="message"><br>
    v-model.lazy：<input type="text" v-model.lazy="message"><br>
    v-model.number：<input type="text" v-model.number="message"><br>
    v-model.trim：<input type="text" v-model.trim="message">
    <hr>
    <h2>文本域</h2>
    <textarea id="" cols="30" rows="10" v-model="message"></textarea>
    <hr>
    <h2>多选框</h2>
    <input type="checkbox" id="isTrue" v-model="isTrue">
    <label for="isTrue">{{isTrue}}</label>
    <hr>
    <h2>多选框绑定数组</h2>
    <input type="checkbox" id="fesine" v-model="web_names" value="fesine">
    <label for="fesine">fesine</label>
    <input type="checkbox" id="soly" v-model="web_names" value="soly">
    <label for="soly">soly</label>
    <input type="checkbox" id="lexus" v-model="web_names" value="lexus">
    <label for="lexus">lexus</label>
    <br>
    {{web_names}}
    <h2>单选绑定</h2>
    <input type="radio" id="man" v-model="sex" value="男">
    <label for="man">男</label>
    <input type="radio" id="woman" v-model="sex" value="女">
    <label for="woman">女</label>
    <p>你选择的性别是：{{sex}}</p>
</div>
<script type="text/javascript">
    var app = new Vue({
      el:'#app',
      data:{
        message:'hello world!',
        isTrue:true,
        web_names:[],
        sex:'男'
      }
    })
</script>
</body>
</html>